<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>我要报修</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/mui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/mui.picker.css" rel="stylesheet" type="text/css" />
    <link href="css/mui.dtpicker.css" rel="stylesheet" type="text/css" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/repair.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="card">
            <div id="head-dom" class="card-head"></div>
            <script id="head" type="text/html">
                <img class="card-media" src="{{ pic }}" />
                <div class="card-head-title">&yen;{{ money }}/月</div>
            </script>
        </div>
    </div>
    <div id="person-dom" class="person-info"></div>
    <script id="person" type="text/html">
        <img class="circle-image" src="{{ housekeeper_logo }}">
        <div class="user-info">
            <span class="username">{{ housekeeper_username }}</span>
            <a href="comment.html?id={{ housekeeper_id }}">查看评价</a>
            <div class="star-bar">
                {{ housekeeper_star | star }}
            </div>
            <span class="font-blue">{{ housekeeper_star }}分</span>
        </div>
    </script>
    <div class="introduction"></div>
    <div class="form-body">
        <form action="">
            <div class="form-item">
                <span class="item-title">房间号</span>
                <a class="item-action" href="javascript:;">
                    <span id="room-number" class="action-value"></span>
                </a>
            </div>
            <div class="form-item">
                <span class="item-title">姓名</span>
                <span class="item-action">
                  <input type="text" name="name" class="control-text" placeholder="咱都是有身份证儿的人" />
                </span>
            </div>
            <div class="form-item">
                <span class="item-title">手机号</span>
                <span class="item-action">
                  <input type="text" name="mobile" class="control-text" placeholder="信息时代 一呼即到" />
                </span>
            </div>
            <div class="form-item">
                <span class="item-title">入住时间</span>
                <a class="item-action at" href="javascript:;">
                    <span class="action-value">选择</span>
                    <input type="hidden" name="appoint_time" value="">
                    <i class="icon icon-down"></i>
                </a>
            </div>
            <div class="form-item">
                <span class="item-title">报修留言</span>
                <textarea name="describe" class="control-area" rows="4" placeholder="Honey, 你的小家，我的大事，有什么问题尽管说吧！"></textarea>
            </div>
        </form>
    </div>
    <div class="footer-padding"></div>
    <div class="tool-bar">
        <a id="phone" href="javascript:;">
            <i class="icon icon-phone"></i>
        </a>
        <a id="submit" href="javascript:;" class="btn yellow">一键报修</a>
    </div>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/mui.min.js" type="text/javascript"></script>
    <script src="js/mui.picker.js" type="text/javascript"></script>
    <script src="js/mui.dtpicker.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        var month = [];
        var day = [];
        var hour = [];
        for (var i = 0; i <= 23; i++) {
            hour.push({
                value: i,
                text: i + ':00时'
            });
        }

        for (var i = 1; i <= 12; i++) {
            month.push({
                value: i,
                text: i + '月'
            });
        }

        for (var i = 1; i <= 31; i++) {
            day.push({
                value: i,
                text: i + '日'
            });
        }

        var dtpicker = new mui.DtPicker({
            type: "dmh",
            title: 'Honey, 期待与你见面！',
            bottom: true,
            customData: {
                m: month,
                d: day,
                h: hour,
            }
        });

        $(function() {
            bee.wxConfig(function() {
                bee.hideAllNonBaseMenuItem();
            }, function(res) {});

            var housing_id;
            init();
            initEvent();

            function init() {
                $('[data-id="picker-y"],[data-id="picker-i"]').hide();
                $('.mui-picker').css('width', '33%');
                bee.request({
                    url: '/Member/Repair/getInfo',
                    data: null,
                    success: function(result) {
                        bee.template('head', result.info, true);
                        bee.template('person', result.info, true);
                        housing_id = result.info.housing_id;
                        $('.introduction').text(result.info.housekeeper_intro);
                        $('#room-number').text(result.info.room_number);
                        $('#phone').attr('href', 'tel:' + result.info.housekeeper_mobile);
                    }
                });
            }

            function initEvent() {
                $('body').on('click', '.at', function() {
                    dtpicker.show(function(e) {
                        $('[name="appoint_time"]').val(e.value);
                        $('[name="appoint_time"]').siblings('.action-value').text(e.value);
                    })
                });

                $('body').on('click', '#submit', function() {
                    var date = new Date();
                    var data = {};
                    data.housing_id = housing_id;
                    data.detailed = $('[name="describe"]').val();
                    data.add_time = date.getFullYear() + '-' + $('[name="appoint_time"]').val();
                    data.mobile = $('[name="mobile"]').val();
                    data.name = $('[name="name"]').val();
                    bee.request({
                        url: '/Member/Repair/add',
                        data: data,
                        success: function(result) {
                            bee.open('repair-success.html');
                        }
                    });
                });

                $('body').on('click', 'a.favorite', function(e) {
                    var dom = $(this).find('.icon');
                    if (dom.hasClass('icon-star-red-blank')) {
                        bee.request({
                            url: '/Member/Index/collection',
                            data: {
                                type: 1,
                                housing_id: bee.getQueryString('id'),
                            },
                            success: function(result) {
                                dom.removeClass('icon-star-red-blank').addClass('icon-star-red');
                            }
                        });
                    } else {
                        bee.request({
                            url: '/Member/Index/collection',
                            data: {
                                type: 2,
                                housing_id: bee.getQueryString('id'),
                            },
                            success: function(result) {
                                dom.removeClass('icon-star-red').addClass('icon-star-red-blank');
                            }
                        });
                    }
                });
            }
        });
    </script>
</body>

</html>
